<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-删除和修改</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
          // 给按钮绑定事件
          $("button").click(function () {
            // 获取元素的值
            let id = $("input[name=id]").val();
            let uname = $("input[name=uname]").val();
            let sex = $("input[name=sex]:checked").val();
            let sal = $("input[name=sal]").val();
            // 拼接成字符串
            let str = "<tr>\n" +
                    "      <td>"+id+"</td>\n" +
                    "      <td>"+uname+"</td>\n" +
                    "      <td>"+sex+"</td>\n" +
                    "      <td>"+sal+"</td>\n" +
                    "      <td><button onclick='del()'>删除</button></td>\n" +
                    "    </tr>"
          // 将字符串添加到表中
          // 获取对象
          let $thead = $("thead");
          $thead.append(str);
          });
        });

        // 删除函数
        function del() {
          // 获取事件源
          let target = event.target; // == button
          $(target).parent().parent().remove();
        }
    </script>

</head>
<body>
  <form action="javascript:;" name="frm">
    ID:<input type="text" name="id">
    NAME:<input type="text" name="uname">
    SEX:
    <input type="radio" name="sex" value="男" checked>男
    <input type="radio" name="sex" value="女">女
    SAL:<input type="text" name="sal">
    <button>添加</button>
    <input type="reset" value="重置">
  </form>
  <hr>
  <table border="1px" width="1200px">
    <caption><h3>用户列表</h3></caption>
    <thead>
    <tr>
      <th>ID</th>
      <th>NAME</th>
      <th>SEX</th>
      <th>SAL</th>
      <th>操作</th>
    </tr>
    </thead>
  </table>
</body>
</html>